<template>
    <div class="mainbody">
        <el-container>
            <el-header height="150px" style="width: 100%;position: relative;">
                 <el-row>
                    <el-col :span="4" text-align="right">
                        <div @click="goToLogin" v-if="this.$root.userName == null || this.$root.userName == ''">请登录</div>
                        <div v-if = " this.$root.userName != null && this.$root.userName != '' ">你好!&nbsp;&nbsp;&nbsp;&nbsp;{{this.nickName}}</div>
                        <div>&nbsp;</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="2"><div>&nbsp;</div></el-col>
                    <el-col :span="6">
                        <div class="grid-left bg-purple">
                            <div style="position:relative;color: #ff6633;">
                                <div style="position: absolute;height:75px;width: 100%;line-height:120px;font-size:24px;font-weight: 600;">购物系统</div>
                                <div style="position: absolute;height:75px;width: 100%;line-height:10px;top:75px;font-size: 18px;font-weight: 500;">gouwuxitong</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div>&nbsp;&nbsp;</div>
                    </el-col>
                    <el-col :span="6" >
                        <div class="grid-right bg-purple">
                            <div>
                                <el-form>
                                    <el-form-item>
                                        <div style="position:relative;background-color:white;height: 38px; line-height: 38px;top:40px;border:1px solid #ff6633;border-radius:30px;border-width:2px;padding:3px">
                                        <el-row>
                                            <el-col :span="5">
                                                <el-select placeholder="宝贝" value=宝贝 >
                                                    <el-option label="商铺" value="shangpu">
                                                    </el-option>
                                                    <el-option label="天猫" value="tianmao">
                                                    </el-option>
                                                </el-select>
                                            </el-col>
                                            <el-col :span="15"><el-input v-model="searchVal"></el-input></el-col>
                                            <el-col :span="4">
                                                <el-button :round="true" type="warning" style="color:white;width: 70px; " @click="searchGoods">搜索</el-button>
                                            </el-col>
                                            </el-row>
                                        </div>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="2"><div>&nbsp;</div></el-col>
                </el-row> 
            </el-header>
            <el-main style="height: 100%;">
                <!-- 商品详情 -->
                <el-row>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="20">
                        <div style="height:100%;background-color:white;border-radius: 30px;" position="relative">
                            <div height="60px">&nbsp;&nbsp;</div>
                            <div height="60px">&nbsp;&nbsp;</div>
                            <div style="top: 50px;"  position="relative">
                            <el-form>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item>
                                            <img :src="goodsmes.goodsImage" width="300px" height="300px" alt="图片为空">
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <div style="text-align: left;">
                                            <el-form-item>
                                                <h2>{{ goodsmes.goodsName }}</h2>
                                                <div class="fontColor" style="height:60px;width:500px;position: relative;top: -15px;"><p>店铺价格 <span ><h2 style="float:left;position:absolute;left: 70px;top: -20px;">¥{{ goodsmes.goodsPrice }}</h2></span></p></div>
                                            </el-form-item>
                                            <el-form-item label="配送地址">
                                                <el-select v-model="value1" placeholder="请选择收货地址">
                                                    <el-option
                                                    v-for="item in options"
                                                    :key="item.value"
                                                    :label="item.address"
                                                    :value="item.id">
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item>
                                                <el-input-number size="mini" v-model="num" controls-position="right" @change="handleChange(goodsmes)" :min="1" :max="goodsmes.goodsInventoryCount"></el-input-number>
                                            </el-form-item>
                                            <el-form-item>
                                                <el-button @click="purchase" type="primary" round>购买</el-button>
                                                <el-button @click="addTrolley(goodsmes)" type="primary" round>加入购物车</el-button>
                                            </el-form-item>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-form>
                            </div>
                                <!-- 宝贝评价 -->
                            <el-row>
                                <div style="width: 80%;margin-left: 80px;" text-algin="left">
                                    <div class="CommentItem">评论</div>
                                    <div  v-for="(Comment,index) in FindCommentByGoodsId" :key="index">
                                        <el-card style=" padding: 14px;">
                                            <div>
                                                <el-button type="warning" icon="el-icon-user-solid" circle></el-button>
                                                <span>{{Comment.userName}}</span>
                                            </div>
                                            <div>
                                                <el-rate v-model="Comment.goodsRating" show-text>
                                                </el-rate>
                                            </div>
                                            <div>{{ Comment.goodsComment }}</div>
                                        </el-card>
                                    </div>
                                </div>
                            </el-row>
                        </div>
                    </el-col>
                    <el-col :span="2">&nbsp;</el-col>
                </el-row>
                
            </el-main>
            <el-footer>作者：咕嘟[gudoo]</el-footer>
        </el-container>
    </div>
</template>
  
  <script>
  import {login,userInfo,findGoodsAddress,findCommentByGoodsId,getGoodsById, } from "../ajax/get"
  import {addGoodsOrder,addComment,insertCartInfo} from "../ajax/post"
//   import defaultValue from "../utils/defalutValue"
  export default {
      name: "goodsPage",
      data () {
          return {
            nickName: "", // 昵称
            userName:"",//用户名
            searchVal: "", // 搜索值
            goodsmes:{},//获取的商品信息对象
            options:[],//收获地址列表
            value1: '',//选择收货地址的多选项
            label: '地址1',
            mini:1,//商品选择数量
            value:12,//评论数量
            activeNames:[],
            num:1,
            goodsList:[],//商品数据
            FindCommentByGoodsId:[],//通过商品id查找评论记录
          };
      },
      methods: {
        goToLogin() {
            this.$router.push({
                path: '/shopLogin',
                query: {
                    path: 'ShoppingMall'
                }
            })
        },
        //加入购物车
        addTrolley(goodsmes){
            let obj = {
                "createTime": "",
                "goodsAllPrice": goodsmes.goodsPrice*this.num,
                "goodsCount": this.num,
                "goodsId": this.$route.query.goodsId,
                "goodsImage": goodsmes.goodsImage,
                "goodsName": goodsmes.goodsName,
                "goodsPrice": goodsmes.goodsPrice,
                "id":"",
                "updateTime": "",
                "userName":sessionStorage.getItem("userName"),
            }
            insertCartInfo(obj).then(res =>{
                console.log("购物车数据:",res);
                this.$message.error(res.data.msg);
            })
            this.$router.push({
                path: '/shoppingTrolley',
            })
        },
        purchase(){
            //新增订单,购买单个商品
                let obj = {
                "createTime": "",
                "goodsAddress": this.value1,
                "goodsBuyAllPrice": this.num*this.goodsmes.goodsPrice,
                "goodsBuyCount": this.num,
                "goodsBuyPrice": this.goodsmes.goodsPrice,
                "goodsId": this.$route.query.goodsId,
                "goodsStatus": 2,
                "id": 0,
                "updateTime": "",
                "userName": sessionStorage.getItem("userName")
                }
                addGoodsOrder(obj).then(res =>{
                    console.log("订单数据:",res);
                    this.$message.error(res.data.msg);
                })
                this.$router.push({
                  path: '/writeComment',
                  query: {
                    goodsStatus: 2,
                    goodsId:this.$route.query.goodsId,
                  }
              })
        },
        
          // 查找用户信息
        findUserInfo(userName) {
            userInfo(userName).then(res => {
                console.log("用户信息:",res);
                this.nickName = res.data.data.nickName;
                this.userName = res.data.data.userName;
                //获取购物地址
                findGoodsAddress(res.data.data.userName).then(adr =>{
                    console.log("获取的地址",adr);
                    this.options=adr.data.data;
                    console.log("获取的地址1",this.options);
                })
                // this.goods.id = this.$route.query.goodsId;
                getGoodsById(this.$route.query.goodsId).then(mes =>{
                    console.log("获取的商品信息",mes);
                    this.goodsList= mes.data.data;
                    console.log("获取的商品信息--",this.goodsList);
                    this.goodsmes = this.goodsList;
                //     this.goodsmes = this.goodsList.map(d=>({
                //     ...d,
                //     goodsCount:1, 
                //     goodsAllPrice :1,

                // }))
                console.log("新的商品数据：---",this.goodsmes)
                })
                // 根据商品编号查找评价记录
                findCommentByGoodsId(this.$route.query.goodsId,sessionStorage.getItem("userName")).then(com => {
                    console.log(com,"评价记录");
                    this.FindCommentByGoodsIdAndUserName = com.data.data;
                    console.log(this.FindCommentByGoodsIdAndUserName,"新评价记录");

                })
            })
        },
        handleChange(goodsmes){
            console.log("商品",goodsmes);
            goodsmes.goodsAllPrice = this.num * goodsmes.goodsPrice;
        },
        // 搜索商品
        searchGoods() {
                let goodsName=this.searchVal;
                // this.goodsName=this.searchVal;
            searchGoodsByGoodsName(goodsName).then(res => {
                console.log("搜索商品:",res);
            })
        },
        //查找商品信息
        findGoods(){
            searchGoodsByGoodsName().then(res =>{
            console.log(res);
            let goodsInfor =res.data.data;
            console.log("获取的用户信息",goodsInfor)
          })
        },
      },
      created() {
        this.findUserInfo(sessionStorage.getItem("userName"));
        console.log("详情-商品id",this.$route.query.goodsId);
      }
  }
  </script>
  
  <style scoped>
.mainbody {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    position: relative;
    background: rgb(226, 219, 219);
    position: relative;
}

.el-header {
    background: white;
    width: 100%;
    overflow: hidden;
}

.el-footer{
    background: white;
    height: 100px;
    line-height: 100px;
}

.main-header{
    height: 75px;
    border-bottom: 1px solid rgb(237, 233, 233);
}

.CommentItem {
    border-bottom: 1px solid rgb(200, 197, 197);
  top: 10px;
  /* margin-right: 40px; */
}

.el-card{
    margin: 20px 0;
    border-radius: 20px;
}
.fontColor{
    color: rgb(241, 85, 38);
}
  </style>